<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <title>主题设置</title>
        <link rel="icon" th:href="${config.SITE_ICON}">
        <link rel="stylesheet" th:href="${config.SITE_CDN+'/static/css/bootstrap.min.css'}"/>
        <link rel="stylesheet" th:href="${config.SITE_CDN+'/static/iconfont/iconfont.css'}"/>
        <link rel="stylesheet" th:href="${config.SITE_CDN+'/static/css/app.css'}"/>
        <style>
            .z-theme-set-content .z-card{
                min-height: calc(100vh - 30px);
                margin-bottom: 0;
                padding-bottom: 40px;
            }
            .z-theme-set-content .theme-img img{
                max-width: 100%;
                margin-bottom: 20px;
            }
            .z-theme-set-content .theme-bottom{
                position: fixed;
                bottom: 0;
                right: 15px;
                left: 15px;
                z-index: 2;
                text-align: right;
                padding: 10px 30px;
                background: #fff;
                border-top: 1px solid #eee;
            }
        </style>
    </head>
    <body>
        <div class="z-content z-theme-set-content">
            <div class="z-card">
                <div class="z-card-header">[[${theme.name}]]</div>
                <div class="z-card-body">
                    <div class="col-md-8">
                        <div class="theme-img">
                            <img th:src="${theme.img}"/>
                        </div>
                        <div class="theme-desc">
                            [[${theme.description}]]
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="z-tabs z-tabs-easy">
                            <ul class="nav nav-tabs">
                                <li th:each="item,temp:${theme.settings}" th:class="${temp.index==0?'active':''}">
                                    <a th:href="${'#theme-tab-'+temp.index}" data-toggle="tab" aria-expanded="true" th:text="${item.label}"></a>
                                </li>
                            </ul>
                            <form id="theme-form">
                                <div class="tab-content">
                                    <div th:each="item,temp:${theme.settings}" th:id="${'theme-tab-'+temp.index}" th:class="${temp.index==0?'tab-pane active':'tab-pane'}">
                                        <div th:each="formItem:${item.form}" class="form-group">
                                            <label class="control-label" th:text="${formItem.label+'：'}"></label>
                                            <input th:if="${formItem.type=='text'}" type="text" th:name="${formItem.name}" class="form-control" th:value="${formItem.value}" th:placeholder="${formItem.placeholder}"/>
                                            <select th:if="${formItem.type=='select'}" th:name="${formItem.name}" class="form-control">
                                                <option th:each="option:${formItem.options}" th:value="${option.value}" th:selected="${option.value}==${formItem.value}" th:text="${option.label}"></option>
                                            </select>
                                            <div th:if="${formItem.type=='radio'}" th:each="option:${formItem.options}"  class="z-radio">
                                                <input type="radio" th:name="${formItem.name}"  th:value="${option.value}" th:checked="${option.value}==${formItem.value}"/>
                                                <label><i></i>[[${option.label}]]</label>
                                            </div>
                                            <textarea th:if="${formItem.type=='textarea'}" type="text" th:name="${formItem.name}" class="form-control" th:text="${formItem.value}" th:placeholder="${formItem.placeholder}"></textarea>
                                            <div th:if="${formItem.type=='file'}" class="input-group">
                                                <input type="text" th:name="${formItem.name}" th:value="${formItem.value}" class="form-control" th:placeholder="${formItem.placeholder}"/>
                                                <span class="input-group-btn">
                                                  <button type="button" name="upload1" class="btn btn-success btn-flat z-uploader">上传</button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="theme-bottom">
                            <button id="btn-save" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script th:src="${config.SITE_CDN+'/static/js/jquery.min.js'}"></script>
        <script th:src="${config.SITE_CDN+'/static/js/bootstrap.min.js'}"></script>
        <script th:src="${config.SITE_CDN+'/static/js/app.js'}"></script>
        <script>
            $(function () {
                App.initSelect("select");
                $(".z-uploader").each(function () {
                    var $this = $(this);
                    App.initUploader({
                        pick: $this,
                        url:'/upload/upload',
                        accept:'jpg,png',
                        before:function(){
                            App.mask($this);
                        },
                        onSuccess:function(picker,res){
                            App.unmask($this);
                            if(res.status===200) {
                                $this.parent().prev().val(res.data.fileFullPath);
                            }
                        }
                    });
                });
                
                $("#btn-save").click(function () {
                    App.postAjax("/admin/theme/save",{themeId:'[[${theme.id}]]', settingJson: JSON.stringify($("#theme-form").serializeArray()) },function (data) {
                        if(data.status===200){
                            App.msgS(data.msg);
                        }else{
                            App.msgE(data.msg);
                        }
                    })
                })


            })
        </script>
    </body>
</html>